<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器 after</title>
    <style>
        p::after {
            content: 'CSS';
        }

        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: #000;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: red;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        /* 封装一个代码片段 - 清浮动  -  reset.min.css
        .clearfix{

        }
        
        */
    </style>
</head>

<body>
    <!-- css -  clear:both
    1.块级元素  div  span - 转化display:block
    2.空容器    没有内容
    3.clear:both
    -->
    <p>珠峰培训</p>
    <div class="main clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div style="clear: both;"></div> -->
    </div>
    <div class="main1 clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div style="clear: both;"></div> -->
    </div>
    <ul>
        <li>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</li>
        <li>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</li>
        <li>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</li>
        <li>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</li>
        <li>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</li>
    </ul>
</body>

</html>